<template>
    <div>
        <index-header></index-header>
        <el-container class="order-container">

            <el-collapse accordion>
                <el-empty v-if="orderList.length === 0" :image-size="200" description="您当前还没用订单哦~快去下单吧！"
                    style="width:1100px;height:400px;" />
                <div v-for="orders in orderList" :key="orders" class="orders-item">
                    <!-- <p><el-checkbox  size="large" /></p> -->
                    <div class="head-orderItem">
                        <el-row>
                            <el-col class="el-col-textalign" :span="6">创建时间：{{ orders.createdtime }}</el-col>
                            <el-col class="el-col-textalign" :span="6">订单号：{{ orders.orderFId }}</el-col>
                            <el-col class="el-col-textalign" :span="5">
                                <span v-if='orders.orderStatus === 3'>快递单号：{{ orders.expressNo }}</span>

                            </el-col>
                            <el-col class="el-col-textalign" :span="4">
                                <span v-if="orders.orderStatus === 3">快递类型：{{ orders.express_type }}</span>
                            </el-col>
                            <el-col class="el-col-textalign" :span="3">
                                <el-button size="small" type="danger" @click="delOrder(orders.orderFId)">删除</el-button>

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col class="el-col-textalign" :span="5">
                                订单状态：
                                <el-tag v-if="orders.orderStatus === 1" type="danger">未支付</el-tag>
                                <el-tag v-else-if="orders.orderStatus === 2">已支付</el-tag>
                                <el-tag v-else-if="orders.orderStatus === 3">已发货</el-tag>
                                <el-tag v-else-if="orders.orderStatus === 4">已收货</el-tag>
                            </el-col>

                            <el-col class="el-col-textalign" :span="5">支付类型：{{ orders.paytype }}</el-col>
                            <el-col class="el-col-textalign" :span="4">订单总计：<span style="color:red">￥{{
                                orders.amountMoney
                            }}</span> </el-col>
                            <el-col class="el-col-textalign" :span="6">
                                <span v-if="orders.paytime !== null">支付时间：{{ orders.paytime }}</span>
                            </el-col>
                            <el-col class="el-col-textalign" :span="4">
                                <el-button size="small" :type="orders.orderStatus === 4 ? 'info' : 'success'"
                                    @click="ConfirmOfGoods(orders.orderFId, orders.orderStatus)"
                                    :disabled="orders.orderStatus === 4 ? true : false">
                                    <span v-if="orders.orderStatus < 4"> 收货</span>
                                    <span v-else-if="orders.orderStatus === 4"> 已收货</span>
                                </el-button>
                                <el-button @click="pay(orders)" size="small" type="primary"
                                    :disabled="orders.orderStatus !== 1">支付</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col class="el-col-textalign" :span="6">收件人：{{ orders.address.consigneeName }}</el-col>
                            <el-col class="el-col-textalign" :span="6">收件人电话：{{
                                orders.address.consigneePhone
                            }}</el-col>
                            <el-col class="el-col-textalign" :span="12">
                                配送至：{{
                                    orders.address.provinces + '/' + orders.address.city + '/' + orders.address.county
                                    + '/' + orders.address.detailAddress
                                }}
                            </el-col>
                        </el-row>
                    </div>

                    <div v-for="item in orders.orderDetailList" :key="item" class="item-detail">
                        <el-collapse-item title="" :name="item.bookId">
                            <template #title>
                                <span style="color:dodgerblue">《{{ item.book.bookname }}》 </span><el-icon>
                                    <ArrowRightBold style="color:dodgerblue" />
                                </el-icon>
                            </template>
                            <div class="goods-detail">
                                <div class="goods-detail-image">
                                    <el-image :src="item.book.bookpic" :initial-index="4" fit="cover"
                                        :preview-src-list="[item.book.bookpic]" preview-teleported
                                        style="width: 90px;height: 120px;"></el-image>
                                </div>
                                <div class="goods-detail-text">
                                    <el-row>
                                        <el-col :span="8">
                                            <div style="background:white;height:120px;text-align:left;padding-left:30px;">
                                                <h3 style="line-height:10px;"> 《{{ item.book.bookname }}》</h3>
                                                <p>{{ item.book.author }}</p>
                                                <p>{{ item.book.presshouse }}</p>
                                            </div>
                                        </el-col>
                                        <el-col :span="4">
                                            <div class="minbox">单价：￥{{ item.price }}</div>
                                        </el-col>
                                        <el-col :span="4">
                                            <div class="minbox">数量：{{ item.countNum }}</div>
                                        </el-col>
                                        <el-col :span="4">
                                            <div class="minbox">小计：￥{{
                                                item.price *
                                                item.countNum
                                            }}</div>
                                        </el-col>
                                        <el-col :span="4">
                                            <div class="minbox">
                                                <a class="detail" @click="detail(item.book.bookId)">商品详情>>></a>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-collapse-item>
                    </div>
                </div>
            </el-collapse>
        </el-container>
    </div>
</template>
    
<script>
import { toRefs, reactive } from '@vue/reactivity'
import { useRouter } from "vue-router"
import { ShowOrderApi, ConfirmOfGoodsApi, delOrderApi } from "../utils/clientApi"
import indexHeader from './indexHeader.vue'
import { ElMessage } from 'element-plus'
export default {
    components: { indexHeader },
    name: "Order",
    setup() {
        const router = useRouter()
        const data = reactive({
            param: "",
            address: {},
            orderDetail: {},
            orderDetailList: [],
            orderList: []

        })
        const getOrderList = () => {
            data.param = JSON.parse(localStorage.getItem("userInfo")).id
            ShowOrderApi(data.param).then(res => {
                // console.log(res);
                data.orderList = res.data
                data.address = res.data.address
                data.orderDetailList = res.data.orderDetailList
            })

        }
        //   详情页
        const detail = (bookId) => {
            router.push({
                path: "/goodsdetail",
                query: { bookId: bookId }
            })
        }
        // 确认收货
        const ConfirmOfGoods = (orderFId, orderStatus) => {
           
            if (orderStatus === 3) {
                const data = {orderFId:orderFId,orderStatus:orderStatus}
                ConfirmOfGoodsApi(data).then(res => {
                   if(res.status === 200 ){
                    ElMessage.success(res.msg)
                    getOrderList()
                   }else{
                    ElMessage.error("收货失败")
                   }

                })
            }else{
                ElMessage.error("收货失败")
            }


        }
        // 删除订单
        const delOrder = (orderFId) => {
            console.log(orderFId);
            delOrderApi(orderFId).then(res => {
                ElMessage.info(res.msg)
                getOrderList()
            })
        }

        // 支付
        const pay = (orders) => {
            window.open("http://localhost:8081/alipay/pay?subject=" + orders.oid + "&totalAmount=" + orders.amountMoney + "&traceNo=" + orders.orderFId)
        }

        getOrderList()
        return {
            ...toRefs(data),
            getOrderList, detail, ConfirmOfGoods, delOrder, pay
        }
    }
}
</script>
    
<style scoped>
.order-container {
    width: 1100px;
    margin: 0 auto;
}

.orders-item {

    width: 1100px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border: 1px solid rgb(247, 145, 145);
    margin-top: 15px;
    border-radius: 15px;
    background: rgb(255, 255, 255);
}

.head-orderItem {
    width: 1100px;
    height: 100px;


}

.el-col-textalign {
    margin: 10px 0 2px 0;
    padding-left: 30px;
    font-size: 14px;
    text-align: left;
}

.item-detail {
    padding: 0 15px 0 15px;
}

.goods-detail {
    width: 1100px;
    height: 110px;
    padding-top: 15px;
}

.goods-detail-image {
    display: block;
    width: 90px;
    height: 120px;
    margin-left: 10px;
    float: left;
}

.goods-detail-text {
    display: block;
    width: 950px;
    height: 120px;
    margin-left: 10px;

    float: left;
}

.minbox {
    background: white;
    height: 120px;
    padding-top: 45px;
}

.detail {
    color: #0098f7;
    font-size: 14px;
}

a:hover {
    cursor: pointer;
}
</style>>

